<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 9/21
  Time: 16:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%--开启el表达式--%>

<%--导入jstl核心标签库--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">
<head>
    <title>首页</title>
    <%@include file="common/headers.jsp" %>
    <link rel="stylesheet" href="static/css/main.css">
    <style>
        a:hover {
            text-decoration: none;
        }
    </style>
    <script>
        $(function () {
            //id为share的元素获取焦点时触发的事件
            $("#share").focus(function () {
                //console.log('share what you thinking');
                //console.log($(this).prev())  //得到当前文本域的上一个兄弟节点
                $(this).prev().hide(); //立刻消失
            });

            //id为share的元素失去焦点时触发的事件
            $("#share").blur(function () {
                if ($(this).val() === '') { //当文本域没有元素时，显示提示标题
                    $(this).prev().show();
                }
            });
            $("#share").keyup(function (event) {//当文本域触发了keyup事件后触发如下函数
                if ($(this).val() !== '') {//一旦文本域不为空，则说明用户输入了内容
                    $('#btn-post').removeClass('disabled') //移除按钮的禁用样式
                } else { //如果文本域的值为空，则需要添加禁用按钮的样式
                    if (!$('#btn-post').hasClass("disabled")) { //判断当前按钮是否包含disabled类，如果没有则添加
                        $('#btn-post').addClass("disabled")
                    }
                }
            });

            //当用户点击了提交按钮后触发的事件
            $("#shareForm").submit(function (event) { //event称为事件源
                event.preventDefault(); //阻止表单的提交
                //获取用户输入的内容，通过ajax发布到后台
                var share = $("#share").val();
                var data = $('#shareForm').serialize(); //可以序列化表单为一个字符串

                $.post("publishMessage", data, function (response) {
                    console.log(response);
                    //在当前页最顶上显示当前发布的消息
                    if (response.code == 200) { //发布成功
                        window.location.reload();//重载当前页面
                    }

                }, 'json');

                $("#share").val(''); //清空文本域的值
                if (!$('#btn-post').hasClass("disabled")) { //判断当前按钮是否包含disabled类，如果没有则添加
                    $('#btn-post').addClass("disabled")
                }
                $("#share").prev().show(); //显示分享的标题
            });
        })
    </script>
</head>
<body>
<header class="header" id="site-header">
    <div class="page-title"><h6>各大未来总裁交流博客</h6></div>
    <div class="header-content-wrapper">
        <div class="control-block">
            
            <div class="author-page author vcard inline-items more">
                <div class="author-thumb">
                    <!--头像-->
                    <img alt="author" src="http://v.bootstrapmb.com/2019/6/mmjod5239/img/author-page.jpg" class="avatar">
                    <span class="icon-status online"></span>
                    <div class="more-dropdown more-with-triangle">
                        <div class="mCustomScrollbar ps ps--theme_default ps--active-y" data-mcs-theme="dark"
                             data-ps-id="36d9d401-1181-d38f-f95a-ee75bfab3fe5">
                            <div class="ui-block-title ui-block-title-small"><h6 class="title">Your Account</h6></div>
                            <ul class="account-settings">
                                <li><a href="36-FavPage-SettingsAndCreatePopup.html">
                                    <span class="glyphicon glyphicon-edit"></span>
                                    <span>修改信息</span></a></li>
                                <li>
                                    <a href="logout">
                                        <span class="glyphicon glyphicon-log-out"></span>
                                        <span>退出登录</span>
                                    </a>
                                </li>
                            </ul>
                            
                        </div>
                    </div>
                </div>
                <a href="02-ProfilePage.html" class="author-name fn">
                    <div class="author-title"> ${user.nickName}

                    </div>
                    <span class="author-subtitle">SPACE COWBOY</span></a></div>
        </div>
    </div>
</header>
<div class="header-spacer"></div>
<div class="container">
    <main class="col col-xl-6 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
        <div class="row">
            <!--评论-->
            <div class="ui-block message-publish"><!-- News Feed Form  -->
                <div class="news-feed-form"><!-- Nav tabs --><!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="home-1" role="tabpanel" aria-expanded="true">
                            <form id="shareForm">
                                <div class="author-thumb">
                                    <img src="http://v.bootstrapmb.com/2019/6/mmjod5239/img/avatar10-sm.jpg"
                                         alt="author">
                                </div>
                                <div class="form-group with-icon label-floating is-empty">
                                    <label class="control-label">分享你的见闻</label>
                                    <textarea class="form-control" name="share" id="share"></textarea>
                                    <span class="material-input"></span>
                                </div>
                                <div class="add-options-message">
                                    <button id="btn-post" class="btn btn-primary btn-md-2 disabled">发布</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <c:forEach items="${messages}" var="message_vo">
                <div class="ui-block">
                    <article class="hentry post">
                        <div class="post__author author vcard inline-items">
                            <!--头像-->
                            <img src="http://v.bootstrapmb.com/2019/6/mmjod5239/img/avatar10-sm.jpg" alt="author">
                            <div class="author-date">
                                <a class="h6 post__author-name fn" href="#">${message_vo.nickName}</a>
                                <div class="post__date">
                                    <time class="published"> ${message_vo.mesDate}</time>
                                </div>
                            </div>
                        </div>
                        <p>${message_vo.content}</p>
                        <div class="post-additional-info inline-items">
                            <div class="comments-shared"><a href="#" class="post-add-icon inline-items">
                                <a href="#">
                                    <!--评论图标-->
                                    <span class="glyphicon glyphicon-edit"></span>
                                    <span>17</span></a><a href="#" class="post-add-icon inline-items">
                            </a>

                                <a href="#">
                                    <span class="glyphicon glyphicon-thumbs-up"></span>
                                    <span>24</span></a>
                            </a>
                            </div>
                        </div>
                    </article>
                        <%--
                                        <!--评论列表-->
                                        <ul class="comments-list">
                                                <li class="comment-item">
                                                    <div class="post__author author vcard inline-items">
                                                        <div class="author-date"><a class="h6 post__author-name fn" href="02-ProfilePage.html">James
                                                            Spiegel</a>
                                                            <div class="post__date">
                                                                <time class="published" datetime="2004-07-24T18:18"> 38 mins ago</time>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="more">
                                                            <svg class="olymp-three-dots-icon">
                                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                                            </svg>
                                                        </a></div>
                                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium der doloremque
                                                        laudantium.</p>

                                                    <a href="#" class="reply">
                                                        <span class="glyphicon glyphicon-edit"></span> Reply
                                                    </a>
                                                </li>
                                                <li class="comment-item">
                                                    <div class="post__author author vcard inline-items">
                                                        <div class="author-date"><a class="h6 post__author-name fn" href="#">Mathilda Brinker</a>
                                                            <div class="post__date">
                                                                <time class="published" datetime="2004-07-24T18:18"> 1 hour ago</time>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="more">
                                                            <svg class="olymp-three-dots-icon">
                                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                                            </svg>
                                                        </a></div>
                                                    <p>Ratione voluptatem sequi en lod nesciunt. Neque porro quisquam est, quinder dolorem ipsum
                                                        quia dolor sit amet, consectetur adipisci velit en lorem ipsum duis aute irure dolor in
                                                        reprehenderit in voluptate velit esse cillum.</p>
                                                    <a href="#" class="reply">
                                                        <span class="glyphicon glyphicon-edit"></span> Reply
                                                    </a>
                                                </li>
                                            </ul>
                                        <a href="#" class="more-comments">查看更多评论 <span>+</span></a>--%>
                </div>
            </c:forEach>


        </div>
    </main>
</div>
</body>
</html>
